<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/js.vue.js"></script>
</head>
<body>
    <div id="box">
    <button @click="corrent++">  点击</button>
       {{xxs}}
       {{xxs}}
       {{xxs}}
       {{xxs}}
        <!-- {{corrent==0?now():0}}
        {{corrent==1?now():0}}
        {{corrent==2?now():0}}
        {{corrent==3?now():0}} -->

        <!-- {{corrent==0?now:0}}
        {{corrent==1?now:0}}
        {{corrent==2?now:0}}
        {{corrent==3?now:0}} -->
</div>
<script>
    Vue.createApp({
        data(){
            return{
             corrent: 0
            }
        },methods:{
            // now(){
            //     return Date.now()
        },
        computed:{//计算属性
            xxs(){
               console.log('123')
                return this.corrent+1;
             }   
            }
                  
          //   如果我们依赖于data响应式属性计算结果,则选择computed    
        //优点：会缓存第一次计算结果，如果它依赖的响应式数据不变，则直接返回上一次缓存结果
    }).mount("#box")
</script>
</body>
</html>